<template>
  <div class="goods">
    <div class="scroll-nav-wrapper">
      <cube-scroll-nav
        :side="true"
        :data="goods"
        :options="scrollOptions"
        v-if="goods.length"
        @change="changeHandler"
        @sticky-change="stickyChangeHandler">
        <template slot="bar" slot-scope="props">
          <cube-scroll-nav-bar
            direction="vertical"
            :labels="props.labels"
            :current="props.current"
            :txts="barTxts">
            <template slot-scope="props">
              <div class="text">
                <support-icon
                  v-if="props.txt.type >= 1"
                  :size="3"
                  :type="props.txt.type"
                ></support-icon>
                <span>&nbsp;{{ props.txt.name }}</span>
              </div>
            </template>
          </cube-scroll-nav-bar>
        </template>
        <cube-scroll-nav-panel
          v-for="item in goods"
          :key="item.name"
          :label="item.name"
          :title="item.name">
          <ul >
            <li v-for="food in item.foods" :key="food.name" @click="goodsDetail(food.id)">
              <div class="content-box">
                <div class="icon">
                  <img width="57" height="57" :src="food.icon">
                </div>
                <div class="content">
                  <div class="title">{{ food.name }}</div>
                  <div class="description">{{ food.description }}</div>
                  <div class="amount-box">
                    <span class="sale">{{ '月售' + food.sellCount + '份' }}</span>
                    <span class="rating">{{ '好评率' + food.rating }}%</span>
                  </div>
                  <div class="price-box">
                    <div class="price">
                      <span class="new-price">{{ '￥' + food.price }}</span>
                      <span class="old-price">{{ '￥' + (food.oldPrice === '' ? 0: food.oldPrice) }}</span>
                    </div>
                    <div class="cart">
                      <goods-button :amount="getStoreAmount(food.id)" :food="setFoodType(item.name, food)"></goods-button>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>
    <div class="goods-bottom"><goods-cart :cartAmount="cartAllAmount" :cartPrice="cartAllPrice"></goods-cart></div>
  </div>
</template>

<script>
import goodsCart from 'components/goods/goods-cart'
import goodsButton from 'components/goods/goods-button'
import SupportIcon from 'components/common/support-icon/support-icon'
import { mapState, mapMutations, mapGetters } from 'vuex'

export default {
  name: 'goods',
  components: {
    goodsCart,
    goodsButton,
    SupportIcon
  },
  props: {
    data: Object
  },
  data () {
    return {
      goods: [],
      scrollOptions: {
        click: false,
        directionLockThreshold: 0
      }
    }
  },
  watch: {
    data () {
      this.goods = this.data.goods
    }
  },
  methods: {
    ...mapMutations(['reduce', 'add']),
    changeHandler (label) {
    },
    stickyChangeHandler (current) {
    },
    // 接口数据中没有购物商品数量,根据商品列表中foodId查询store中商品数量,将数量传递到goods-button组件,进行商品数量的显示
    getStoreAmount (foodId) {
      const currentFood = this.cartList.find((item) => {
        return item.id === foodId
      })
      if (currentFood) {
        return currentFood.amount
      } else {
        return 0
      }
    },
    // 将foodType设置到store中的cartList数据中
    setFoodType (type, food) {
      if (type && food) {
        food.type = type
      }
      return food
    },
    // 跳转商品详情页
    goodsDetail (foodId) {
      this.$router.push('/goodsDetail/' + foodId)
    }
  },
  computed: {
    ...mapState({
      cartList: 'cartList'
    }),
    ...mapGetters({
      cartAllAmount: 'getCartAllAmount',
      cartAllPrice: 'getCartAllPrice'
    }),
    // 自定义左边栏值,将name和type赋值到数组中,name和type都是组件所需要的
    // good数据中有type和name属性的值,这里使用[ES6中对象解构]的方式,直接取good中type和name对应value值,之后直接push到result中再返回
    barTxts () {
      let result = []
      this.goods.forEach((good) => {
        const { type, name } = good
        result.push({ type, name })
      })
      return result
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~cube-ui/src/common/stylus/mixin.styl"
.goods
  position relative
  height 100%
  text-align left
  .scroll-nav-wrapper
    position absolute
    top 0
    left 0
    bottom 48px
    width 100%
    .text
      flex 1
  .content-box
    display flex
    flex-direction row
    margin 18px
    border-bottom 1px $color-background-ssss solid
    .content
      padding-left 10px
      width 100%
      overflow hidden
      .title
        font-size $fontsize-medium
        line-height $fontsize-medium
        color $color-black
        margin-bottom 8px
      .description
        font-size $fontsize-small-s
        line-height $fontsize-small-s
        color $color-thin-black
        margin-bottom 8px
      .amount-box
        font-size $fontsize-small-s
        line-height $fontsize-small-s
        color $color-thin-black
        margin-bottom 8px
        .rating
          margin-left 12px
      .price-box
        display flex
        flex-direction row
        justify-content space-between
        .price
          .new-price
            font-size 10px/14px
            color red
            font-weight 350
            line-height 24px
          .old-price
            font-size 10px
            line-height 24px
            font-weight 350
            text-decoration line-through
            color rgb(147, 153, 159)
            margin-left 8px
  .goods-bottom
    position absolute
    bottom 0
    left 0
    height 48px
    width 100%
  >>> .cube-scroll-nav-bar
    width 80px
    overflow hidden
    white-space normal
  >>> .cube-scroll-wrapper
    height 100%
  >>> .cube-scroll-content
    position relative
    z-index 1
  >>> .cube-scroll-list-wrapper
    overflow: hidden
  >>> .cube-scroll-nav-bar-items
    font-size $fontsize-small
    line-height $fontsize-medium
    font-weight 100
  >>> .cube-scroll-nav-bar-item
    height 54px
    text-align center
    line-height 14px
    font-size 12px
    align-items center
    background-color #f3f5f7
    padding 0 10px
    display flex
  >>> .cube-scroll-nav-bar-item_active
    color $color-background
    background-color $color-white
  >>> .cube-scroll-nav-panel-title
    background-color #f3f5f7
    border-left 2px solid #d9dde1
    height 26px
    font-size 12px
    color rgb(147, 153, 159)
    line-height 26px
    padding-left 14px
    width 100%
</style>
